<template>
  <div class="app-container">
    <div class="detail-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="{
            path: `/attraction/voiceDirs?attraction_name=${attraction_name}&attraction_id=${attraction_id}`
          }"
          ><i
            class="el-icon-arrow-left"
            style="font-size: 15px; font-weight: bold; padding-right: 3px"
          ></i
          >{{ attraction_name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ dir_name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail-create">
      <el-upload
        class="upload-demo"
        action=""
        :show-file-list="false"
        :before-upload="beforeUpload"
      >
        <el-button type="primary" icon="el-icon-plus">新增语音</el-button>
      </el-upload>
    </div>

    <Table :data="list" :columns="columns" :loading="listLoading">
      <template v-slot:file_name>
        <el-table-column label="名称" width="350" prop="file_name" show-overflow-tooltip>
          <template slot-scope="scope"
            ><div class="dir" @click="handleCellClickDetail(scope.row)">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
                <path
                  fill="#8043ff"
                  d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M11 6.64v1.75l-2 .5v3.61c0 .495-.301.883-.662 1.123C7.974 13.866 7.499 14 7 14s-.974-.134-1.338-.377C5.302 13.383 5 12.995 5 12.5s.301-.883.662-1.123C6.026 11.134 6.501 11 7 11c.356 0 .7.068 1 .196V6.89a1 1 0 0 1 .757-.97l1-.25A1 1 0 0 1 11 6.64"
                />
              </svg>
              <p class="dir-name" v-if="editRow !== scope.$index">{{ scope.row.file_name }}</p>
            </div></template
          ></el-table-column
        >
      </template>

      <template v-slot:action>
        <el-table-column label="操作" minWidth="160" fixed="right">
          <template slot-scope="scope">
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="替换"
              placement="top"
              style="margin-right: 5px"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                viewBox="0 -2 24 24"
                class="icon-svg"
              >
                <path
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16"
                />
              </svg>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <i class="el-icon-delete table-action" @click="handleDel(scope.row.id)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </template>
    </Table>
    <div class="pagination-container">
      <pagination
        :total="count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="fetchData"
      />
    </div>
  </div>
</template>

<script>
import { getFileList, delFile, addVoiceFile } from '@/api/attraction'
import { getToken } from '@/utils/auth'
export default {
  name: 'FileList',
  components: {},
  data() {
    return {
      listQuery: {
        page: 1,
        size: 10
      },
      count: 0,
      token: getToken(),
      attraction_id: '', //楼层uuid
      listLoading: false,
      list: [],
      init_status: '',
      version: '',
      attraction_name: '',
      dir_name: '',
      dir_id: '',
      editRow: null, // 添加这一行
      editProp: ['dir'],
      columns: [
        {
          label: '名称',
          slot: 'file_name'
        },
        {
          label: '类型',
          prop: 'file_type'
        },
        {
          label: '修改日期',
          prop: 'modified_time',
          width: '180'
        },
        {
          label: '操作',
          slot: 'action'
        }
      ]
    }
  },
  mounted() {
    const { attraction_id, attraction_name, dir_name, dir_id } = this.$route.query
    this.attraction_id = attraction_id
    this.attraction_name = attraction_name
    this.dir_name = dir_name
    this.dir_id = dir_id
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getFileList({
        attraction_id: this.attraction_id,
        dir_id: this.dir_id,
        ...this.listQuery
      }).then((res) => {
        const { list_data, paging } = res.data
        this.list = list_data
        this.count = paging.count
        this.listLoading = false
      })
    },
    beforeUpload(file) {
      this.listLoading = true
      const formData = new FormData()
      formData.append('voice_file', file)
      formData.append('attraction_id', this.attraction_id)
      formData.append('dir_id', this.dir_id)

      fetch(addVoiceFile, {
        method: 'POST',
        body: formData,
        headers: {
          token: this.token
        }
      })
        .then((res) => {
          // 解析响应体
          return res.json()
        })
        .then((data) => {
          console.log('业务响应数据', data)
          this.listLoading = false

          // 检查业务状态码
          if (data.code === 20000) {
            // 成功
            this.fetchData()
            this.$message.success('文件上传成功！')
          } else {
            // 业务错误
            this.$message.error(data.msg || '文件上传失败！')
          }
        })
        .catch((err) => {
          this.listLoading = false
          console.error('网络错误', err)
          this.$message.error('网络错误，文件上传失败！')
        })

      // 阻止 Element UI 默认上传行为
      return false
    },

    startEdit(index) {
      this.editRow = index
    },
    saveEdit(index) {
      this.editRow = null
      console.log('index', index)
    },

    /**
     * @description: 删除
     */
    handleDel(id) {
      this.$confirm('确认删除该文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delFile(id).then(() => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-create {
  margin-top: 10px;
  margin-bottom: 15px;
}
.input-with-select {
  width: 260px;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1677ff !important;
  color: #fff !important;
  &:hover {
    background-color: #66b1ff !important;
  }
}
.detail-create {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.create-upload {
  & > span {
    font-size: 12px;
    color: #666;
  }
  button {
    border-radius: 6px;
    border: 1px solid #1677ff;
    color: #1677ff;
    padding: 2px 8px 5px !important;
    &:hover {
      .create-upload-svg {
        fill: #66b1ff;
      }
    }
  }
}
.edition {
  color: #666;
  font-size: 12px;
  .edition-span1 {
    margin-right: 20px;
  }
}
/deep/ .el-breadcrumb__inner.is-link {
  color: #666;
}
.dir {
  display: flex;
  align-items: center;
  cursor: pointer;
  p {
    margin-left: 5px;
  }
}
.dir-input {
  display: none;
}
.icon-svg {
  cursor: pointer;
  stroke: #555;
  &:hover {
    stroke: #1677ff;
  }
}
</style>
